<style scoped>
    #page-payback{
        font-family:"微软雅黑", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
        padding-bottom:.5rem;
    }
    .pb-review{
        width:100%;
        height: 3rem;
    }

    .pb-review-tip{
        width:100%;
        height:.58rem;
        font-size: .2rem;

        text-align:center
    }

    .pb-review-tip .ico-right{
        display: inline-block;
        width:.27rem;
        height: .27rem;
        border:.02rem solid #ffffff;
        border-radius:50%;
        vertical-align: middle;

    }

    .pb-review-tip .txt{

        line-height:.58rem;
        font-weight:bold;
        margin-left:.08rem;
    }

    .pb-review-tip .ico-right i{
        display: inline-block;
        width:.13rem;
        height: .06rem;
        border-left:.02rem solid #ffffff;
        border-bottom:.02rem solid #ffffff;
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        transform: rotate(-35deg);
        transform-origin: top left;
        line-height: .47rem;
        margin:0 0 .03rem -0.01rem;
    }

    .pb-review-txt{
        width:100%;
        font-size:.13rem;
        text-align: center;

    }

    .pb_review_qr{
        width:1.8rem;
        height: 1.8rem;
        margin:.21rem auto 0 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .pb_review_btn{
        width: calc(100% - .3rem);
        height: .86rem;
        padding: 0 .15rem;
        display: -webkit-flex;
        -webkit-flex-direction: row;
        -webkit-justify-content: space-between;
        -webkit-align-items: center;
    }

    .pb_review_btn a{
        display:block;
        width:1.62rem;
        height:.44rem;
        text-align: center;
        line-height:.44rem;
        font-size:.18rem;
        -webkit-border-radius:.05rem;
        -moz-border-radius:.05rem;
        border-radius:.05rem;
        border:.02rem solid #f9374f;
    }

    .pb_review_buyRecord{
        width:calc(100% - .3rem);
        padding:0 .15rem .38rem .15rem;
        background:url("../images/pback_t.jpg") bottom left /100% auto no-repeat,url(../images/pback_b.jpg) top left /100% auto no-repeat,#f2f2f2;
    }

    .pb_review_buyRecord .pb_review_buyTip{
        text-align: center;
        font-size: .14rem;
        height: .7rem;
        line-height:.75rem;
    }

    .pb_review_recordItem{
        width:calc(100% - .32rem);
        padding:0 .15rem;
        -webkit-border-radius:.03rem;
        -moz-border-radius:.03rem;
        border-radius:.03rem;
        border:1px solid #d0d0d0;





    }

    .pb_review_recordItem ul li{
        width:100%;
        border-bottom:1px solid #e5e5e5;
        line-height:.39rem;
        display: -webkit-flex;
        -webkit-flex-direction: row;
        -webkit-justify-content: space-between;
        -webkit-align-items: center;
    }

    .pb_review_recordItem ul li:last-child{
        border-bottom:0
    }

    .pb_review_recordItem ul li span.goodsTitle{
        display: block;
        font-size: .15rem;
        width: 2.5rem;
    }

    .pb_review_recordItem ul li span.count{
        display: block;
        font-size: .14rem;
    }

    .pb_review_maybeLike{
        width:100%;
        padding-bottom:.5rem;
    }

    .pb_review_maybeLike .pb_review_like_title{
        width:100%;
        height:.4rem;
        font-size:.15rem;
        text-align: center;
        line-height:.35rem;
    }

    .pb_review_maybeLike .pb_review_like_item{
        width:100%;
    }

    .pb_review_maybeLike .pb_review_like_item li{
        float: left;
        width:49.8%;
        border-top:.01rem solid #d0d0d0;
    }

    .pb_review_maybeLike .pb_review_like_item li:nth-child(2n+1){
        border-right:.01rem solid #d0d0d0;
    }



    .pb_review_maybeLike .pb_review_like_item li .g_img{
        width:100%;
        height:1.65rem;
        background-size:.95rem auto;
        background-position: center center;
        background-repeat: no-repeat;
    }


    .pb_review_maybeLike .pb_review_like_item li .g_title{
        width:calc(100% - 20px);
        padding:0 10px;
        font-size:.14rem;
        text-align: center;

    }

    .pb_review_maybeLike .pb_review_like_item li .g_btn{
        text-align: center;
        line-height:.25rem;
        display: block;
        width:.74rem;
        height: .25rem;
        border-radius:.03rem;
        font-size: .14rem;

        margin:.1rem auto .2rem auto ;
    }
</style>
<template>
    <div class="page-wrap" id="page-payback">
        <header-component :page-name="pageName"></header-component>


        <div class="pb-review background_13">
            <div class="pb-review-tip color_12">
                <span class="ico-right"><i></i></span>
                <span class="txt">恭喜您支付成功</span>
            </div>
            <p class="pb-review-txt color_12">长按二维码关注众联拼宝，以免错过中奖通知</p>
            <img src="http://ww2.sinaimg.cn/mw690/006BEJyMgw1fb7x3i0lpjj30by0byq3s.jpg" class="pb_review_qr" />
        </div>
        <div class="pb_review_btn">
            <a href="javascript:;" data-href="" v-link="{path:'/'}" class="color_12 background_13">继续拼宝</a>
            <a href="javascript:;" data-href="?c=buyrecord" v-link="{path:'/buyRecord'}" class="color_13 background_12">查看拼宝记录</a>
        </div>

        <template v-if="cart.length>0">
            <div class="pb_review_buyRecord background_9">
                <p class="pb_review_buyTip color_6">你成功参与了{{cart.length}}件商品的共{{goodsNum}}人次拼宝，信息如下：</p>
                <div class="pb_review_recordItem background_12">
                    <ul>

                        <li v-for="(k,i) in cart">
                            <span class="goodsTitle color_6 nowrap">{{i.title}}</span>
                            <span class="count color_13">{{i.number}}人次</span>
                        </li>

                    </ul>
                </div>
            </div>
        </template>
        <template v-if="recommond.length>0">
            <div class="pb_review_maybeLike background_12">
                <div class="pb_review_like_title color_6">90%的人都在拼的宝贝</div>
                <ul class="pb_review_like_item">

                    <li v-for="(k,i) in recommond">
                        <div class="g_img" :style="{backgroundImage: 'url('+i.thumb+')'}"></div>
                        <p class="g_title nowrap color_6">{{i.shopTitle}}</p>
                        <a href="javascript:;" class="g_btn background_13 color_12" data-href="?c=detail&id={{i.shopid}}" v-link="{path:'/detail',query:{id:i.shopid}}">立即购买</a>
                    </li>

                </ul>
            </div>
        </template>
    </div>
    <pop :status-pop="statusPop" :msg="msg">
        <a href="javascript:;" v-link="{path:'/home'}">确定</a>
    </pop>
</template>
<script>
    import Goods from '../module/goods'
    import pop from '../components/pop'
    import Cart from '../module/cart'
    import User from '../module/user'
    import Weixin from '../libs/wxShare'
    import headerComponent from '../components/header'
    module.exports = {
        data() {

            return {

                id: '',
                page: 0,
                limit: 10,
                code:'',
                goodsNum:0,
                hasMore: true,
                loading: false,
                statusPop:false,
                msg:'',
                recommond:[],
                cart:[],
                pageName:'支付详情'

            }
        },
        components: {

            pop,
            headerComponent

        },
        created(){
            this.$dispatch('isLoading', true);
        },
        async ready() {

            if (!!this.$route.query.code) {

                this.code = this.$route.query.code;

            } else {

                this.statusPop = true;
                this.msg = '缺少code参数'

            }

            let cartArr = JSON.parse(localStorage.getItem('CART'));

            this.id = cartArr[0].id;

            if (cartArr.length>0) {

                for (var i=0;i<cartArr.length;i++) {

                    this.goodsNum+=cartArr[i].number

                }

            }

            if (!this.id) {

                history.go(-1);
                return;

            }

            let res = await Goods.getRecommond();

            if (!!res && res.length > 0) {

                this.recommond.push(...res);

                this.cart.push(...Cart.cart)
            }

            history.replaceState({
                'num':'a'
            }, null, window.href);

            let goods_detail = await Goods.getDetail(this.id,User.token);

            let self = this;
            Weixin.updateShare({
                title:goods_detail.shopTitle,
                link:location.origin+'/detail?id='+self.id,
                imgUrl:goods_detail.thumb,
                success: function() {
                    let fun_name = this.fun_name;
                    let uid = User.uid;
//                    _czc.push(['_trackEvent','page-payback-'+fun_name+'-分享','分享']);
                     Goods.addShareRecode(uid,this.id,fun_name);
                }
            })

            this.$dispatch('isLoading', false);
        },
        beforeDestroy() {

        },
        methods: {}
    }
</script>
